package com.grechur.wanandroidcompose.page

import android.util.Log
import androidx.activity.compose.BackHandler
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Keyboard
import androidx.compose.material.icons.filled.PanoramaFishEye
import androidx.compose.material.icons.filled.Password
import androidx.compose.material.icons.filled.Person
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.grechur.wanandroidcompose.R
import com.grechur.wanandroidcompose.WanApplication
import com.grechur.wanandroidcompose.viewmodel.LoginViewModel
import kotlinx.coroutines.launch

@Composable
fun LoginPage(globalNavController: NavHostController,loginViewModel: LoginViewModel = viewModel()) {
    val coroutineScope = rememberCoroutineScope()
    loginViewModel.globalNavController = globalNavController
    var userName by remember {
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }
    ConstraintLayout(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
    ) {
        val (logo, nameField, passField, loginBtn, register,error) = createRefs()
        Image(painter = painterResource(id = R.mipmap.logo), contentDescription = "logo",
             modifier = Modifier
                 .size(125.dp, 125.dp)
                 .constrainAs(logo) {
                     top.linkTo(parent.top, margin = 80.dp)
                     start.linkTo(parent.start)
                     end.linkTo(parent.end)
                 }
        )

        TextField(value = userName,
            onValueChange = { userName = it },
            modifier = Modifier
                .constrainAs(nameField) {
                    top.linkTo(logo.bottom, margin = 20.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
                .background(Color.White),
            label = { Text(text = "请输入用户名")},
            placeholder = {
                          Text(text = "用户名")
            },
            singleLine = true,
            shape = RoundedCornerShape(8.dp),
            leadingIcon = {
                Icon(imageVector = Icons.Default.Person, contentDescription = "用户")
            }
        )

        TextField(value = password,
            onValueChange = { password = it },
            modifier = Modifier.constrainAs(passField) {
                top.linkTo(nameField.bottom, margin = 10.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
            singleLine = true,
            label = { Text(text = "请输入密码")},
            placeholder = {
                Text(text = "密码")
            },
            leadingIcon = {
                Icon(imageVector = Icons.Default.Keyboard, contentDescription = "密码")
            },
            visualTransformation = PasswordVisualTransformation()
        )
        Button(onClick = {
                coroutineScope.launch {
                    loginViewModel.login(userName,password)
                }
//            globalNavController.popBackStack()
        },
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 20.dp)
                .constrainAs(loginBtn) {
                    top.linkTo(passField.bottom, margin = 10.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }) {
            Text(text = "登录")
        }
        Text(text = "注册账号", modifier = Modifier
            .clickable {
                globalNavController.navigate("register")
            }
            .constrainAs(register) {
                top.linkTo(loginBtn.bottom, margin = 5.dp)
                end.linkTo(loginBtn.end, margin = 20.dp)
            })
        loginViewModel.loginInfo.let { result->
            if (result.isSuccess) {
                result.getOrNull().takeIf { it != null }?.let { baseData ->
                    if (baseData.errorCode == 0) {
                        Log.e("zhouzhu","login success")
                    }
                }
            } else {
                AnimatedVisibility(visible = result.isFailure, modifier = Modifier.constrainAs(error){
                    start.linkTo(parent.start)
                    top.linkTo(loginBtn.bottom, margin = 5.dp)
                }) {
                    Text(text = "${result.exceptionOrNull()?.message?:"登录失败"}", color = Color.Red)
                }
            }
        }
    }
}

@Preview
@Composable
fun LoginPagePreview(modifier: Modifier = Modifier) {
    LoginPage(rememberNavController())
}